<script setup lang="ts">
  import { buildStyles, getSize, getColor } from "../utils";

  interface IconProps {
    name?: string;
    size?: string | number;
    color?: string;
  }

  const props = withDefaults(defineProps<IconProps>(), {
    name: "like",
    size: 14,
  });

  const styles = buildStyles(() => {
    return {
      fontSize: getSize(props.size),
      color: getColor(props.color || ""),
    };
  });
</script>

<template>
  <component :is="'icon-' + name" :style="styles" />
</template>
